<template>
  <view>
    <image
      src="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2023/02/11/mZQYfwZKiLtoDBeM.png"
      class="bg-image"
      mode="widthFix"
    />
    <Navbar />
    <view class="page-container">
      <view class="user-card" @click="handleGotoInfoForm">
        <u-avatar
          :src="userInfo.avatar || '/static/my/def-user-avatar.png'"
          size="130rpx"
        />
        <view class="username">{{ userInfo.nickname || '获取头像昵称' }}</view>
        <u-icon name="arrow-right" size="36rpx" color="#fff" />
      </view>

      <!--  租户切换  -->
      <my-tenant
        v-if="appConfig.checkAuth"
        v-model="tenantShow"
        :auto-switch="false"
      >
        <template #default="{ tenant }">
          <view class="card-container mt-30rpx flex items-center">
            <view class="text-first text-sm font-500 flex-1">
              当前租户：{{ tenant.shortName }}
            </view>
            <u-button
              type="primary"
              size="small"
              color="#386ee8"
              :throttle-time="600"
              :custom-style="{
                width: '150rpx',
                height: '58rpx'
              }"
              text="切换租户"
              @click="tenantShow = !tenantShow"
            />
          </view>
        </template>
      </my-tenant>

      <!--  菜单栏  -->
      <view
        class="card-container menu"
        :class="[appConfig.checkAuth ? 'mt-30rpx' : 'mt-50rpx']"
      >
        <template v-for="menu in menuList">
          <MenuField
            v-if="menu.show !== false"
            :key="menu.key"
            :menu-key="menu.key"
            :title="menu.title"
            :icon="menu.icon"
            :url="menu.url"
            :type="menu.type"
            :more-params="menu.moreParams"
            @click="handleClickMenu"
          />
        </template>
        <button
          class="mt-20rpx"
          hover-class="menu-field-hover"
          @click="logout"
        >
          <view class="logout-btn">退出登录</view>
        </button>
      </view>

      <view class="version-info">version:{{ appVersion }}</view>
    </view>
  </view>
</template>

<script lang="ts">
import { isEmpty } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import MenuField from '@/components/menu-field/menu-field.vue'
import Navbar from '@/components/navbar/navbar.vue'
import { useGlobalSetting } from '@/settings/system'
import { userStore } from '@/store/modules/user'
import { showModal, showToast } from '@/utils/helper/uniHelper'

@Component({ name: 'My', components: { MenuField, Navbar } })
export default class My extends Vue {
  tenantShow = false

  get appConfig() {
    return useGlobalSetting()
  }

  //用户信息
  get userInfo() {
    return userStore.authUserInfo?.miniUser ?? {}
  }

  handleGotoInfoForm() {
    uni.navigateTo({
      url: '/pages/my-modules/userinfo-form'
    })
  }

  get menuList(): MenuItem[] {
    const hasRealName = !isEmpty(userStore.authUserInfo?.paasPeople)

    return [
      {
        key: 'menu-1',
        icon: '/static/my/menu/icon-1.png',
        title: '实名信息',
        url: '',
        type: hasRealName ? 'none' : 'miniApp',
        moreParams: {
          envVersion: 'trial',
          extraData: {
            token: userStore.getToken,
            oriOpenId: useGlobalSetting().wxAppId
          }
        }
      },
      {
        key: 'menu-2',
        icon: '/static/my/menu/icon-2.png',
        title: '消息中心'
      },
      {
        key: 'menu-3',
        icon: '/static/my/menu/icon-3.png',
        title: '通讯录'
      },
      {
        key: 'menu-4',
        icon: '/static/my/menu/icon-8.png',
        title: '更多',
        url: '/pages/my-modules/more-setting',
        type: 'page'
      }
    ]
  }
  handleClickMenu(menu: MenuItem) {
    if (menu.key === 'menu-1' && menu.type === 'none') {
      return showToast('您已完成实名认证！')
    }
  }

  get appVersion() {
    const { version, isDevServer } = useGlobalSetting()

    return `${version}${isDevServer ? '-dev' : '-prod'}`
  }

  async logout() {
    const { confirm } = await showModal('确认退出登录吗？')
    if (confirm) return userStore.Logout()
  }

  onLoad() {
    // userStore.getAuthUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.user-card {
  display: flex;
  align-items: center;

  .username {
    font-weight: 400;
    font-size: $font-size-2xl;
    line-height: 50rpx;
    text-align: center;
    color: #ffffff;
    padding-left: $space-base;
    padding-right: 10rpx;
  }
}

.card-container.menu {
  @apply px-0 pt-sm pb-sm;

  .logout-btn {
    padding: $space-base 0;
    font-weight: 500;
    @apply text-base leading-base text-primary text-center;
  }
}

.version-info {
  position: fixed;
  left: 0;
  bottom: $space-sm;
  width: 100%;
  text-align: center;

  font-size: $font-size-sm;
  color: $color-third-text;
}

button {
  &:after {
    content: none;
  }
  &:hover {
    background-color: transparent;
  }
}
</style>
